<script setup lang="ts" name="Lottery">
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import LuckyWheel1 from './components/LuckyWheel/LuckyWheel1.vue'
import LuckyWheel2 from './components/LuckyWheel/LuckyWheel2.vue'
import LuckyWheel3 from './components/LuckyWheel/LuckyWheel3.vue'
import LuckyWheel4 from './components/LuckyWheel/LuckyWheel4.vue'
import LuckyGrid1 from './components/LuckyGrid/LuckyGrid1.vue'
import LuckyGrid2 from './components/LuckyGrid/LuckyGrid2.vue'
import LuckyGrid3 from './components/LuckyGrid/LuckyGrid3.vue'
import LuckyGrid4 from './components/LuckyGrid/LuckyGrid4.vue'
import SlotMachine1 from './components/SlotMachine/SlotMachine1.vue'
import SlotMachine2 from './components/SlotMachine/SlotMachine2.vue'
import SlotMachine3 from './components/SlotMachine/SlotMachine3.vue'
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-alert title="使用lucky-canvas抽奖插件实现的相关功能，https://github.com/buuing/lucky-canvas。" type="success" :closable="false" show-icon />
    <el-row :gutter="systemConfig.space">
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <LuckyWheel1></LuckyWheel1>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <LuckyGrid1></LuckyGrid1>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <SlotMachine1></SlotMachine1>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <LuckyWheel2></LuckyWheel2>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <LuckyGrid2></LuckyGrid2>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <SlotMachine2></SlotMachine2>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <LuckyWheel3></LuckyWheel3>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <LuckyGrid3></LuckyGrid3>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <SlotMachine3></SlotMachine3>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <LuckyWheel4></LuckyWheel4>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <LuckyGrid4></LuckyGrid4>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-row {
  margin-top: calc(0px - var(--el-space));

  .el-col {
    margin-top: var(--el-space);
  }
}

.el-card.no-padding {
  :deep(.el-card__body) {
    padding: 0;
  }
}
</style>
